/* Grown-ups gate keypad: the app's parent code screen (build_app.py #plock, build 18).
   Two columns in landscape, each centred: lock, title, dots and "Forgot code?" on the left,
   the 3x4 keypad on the right. Built by js/components/keypad.js. */
.db-keypad{container-type:inline-size;position:relative;border-radius:var(--db-r-xl);overflow:hidden;color:var(--db-ink);font-family:var(--db-font);
  background:radial-gradient(130% 100% at 50% -10%,var(--db-night-top),var(--db-night-bottom));border:var(--db-border);box-shadow:var(--db-shadow-2)}
.db-keypad__in{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:clamp(20px,7cqi,72px);
  min-height:clamp(300px,52cqi,400px);padding:clamp(16px,4cqi,32px) clamp(12px,4cqi,40px);text-align:center}
.db-keypad__info{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 1 280px;min-width:0}
.db-keypad__lock{width:40px;height:40px;fill:none;stroke:var(--db-gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.db-keypad__title{margin:8px 0 2px;font-size:1.5rem;font-weight:600;line-height:1.2}
.db-keypad__sub{margin:0 0 14px;min-height:2.4em;color:var(--db-muted);font-size:.9rem;line-height:1.3;text-wrap:balance}
.db-keypad__sub.is-err{color:var(--db-gold-pale)}
.db-keypad__dots{display:flex;gap:16px;margin:0 0 10px}
.db-keypad__dots i{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);
  transition:background var(--m-dur-fast) var(--m-ease),border-color var(--m-dur-fast) var(--m-ease),transform var(--m-dur-fast) var(--m-ease-spring)}
.db-keypad__dots i.is-f{background:var(--db-gold);border-color:var(--db-gold);transform:scale(1.08)}
.db-keypad__dots.is-err{animation:db-keypad-shake var(--m-dur-slow) linear}
@keyframes db-keypad-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.db-keypad__forgot{min-height:44px;padding:0 16px;border:0;background:none;cursor:pointer;color:var(--db-muted);
  font:500 .82rem var(--db-font);text-decoration:underline;text-underline-offset:3px}
.db-keypad__forgot:hover{color:var(--db-ink)}
.db-keypad__hint{display:inline-flex;align-items:center;gap:.4rem;margin-top:6px;padding:.2rem .7rem;border-radius:var(--db-r-pill);
  background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.2);color:var(--db-muted);font-size:.8rem;font-weight:600}
.db-keypad__hint b{color:var(--db-gold);letter-spacing:.12em;font-variant-numeric:tabular-nums}

.db-keypad__pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:252px;flex:none}
.db-keypad__key{height:56px;border:0;border-radius:var(--db-r-md);background:rgba(255,255,255,.08);color:var(--db-ink);cursor:pointer;
  font:600 1.375rem var(--db-font);font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--m-dur-fast) var(--m-ease-spring),background var(--m-dur-fast) var(--m-ease)}
.db-keypad__key:hover{background:rgba(255,255,255,.12)}
.db-keypad__key:active,.db-keypad__key.is-down{transform:scale(.92);background:rgba(255,255,255,.18)}
.db-keypad__key--del{background:transparent;font-size:.9rem;color:var(--db-muted)}
.db-keypad__key--blank{visibility:hidden}
.db-keypad__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* success: the soft check */
.db-keypad__done{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;
  background:radial-gradient(130% 100% at 50% -10%,var(--db-night-top),var(--db-night-bottom));opacity:0;visibility:hidden;
  transition:opacity var(--m-dur-slow) var(--m-ease),visibility 0s linear var(--m-dur-slow)}
.db-keypad.is-open .db-keypad__done{opacity:1;visibility:visible;transition:opacity var(--m-dur-slow) var(--m-ease)}
.db-keypad__check{width:84px;height:84px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--db-gold) 14%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--db-gold) 55%,transparent),0 0 30px 4px color-mix(in srgb,var(--db-gold) 22%,transparent)}
.db-keypad__check svg{width:44px;height:44px;fill:none;stroke:var(--db-gold);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.db-keypad__check path{stroke-dasharray:30;stroke-dashoffset:30}
.db-keypad.is-open .db-keypad__check{animation:db-keypad-pop var(--m-dur-slow) var(--m-ease-spring) both}
.db-keypad.is-open .db-keypad__check path{animation:db-keypad-draw var(--m-dur-slow) var(--m-ease) .12s forwards}
@keyframes db-keypad-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes db-keypad-draw{to{stroke-dashoffset:0}}
.db-keypad__done h3{margin:6px 0 0;font-size:1.45rem;font-weight:700}
.db-keypad__done p{margin:0 0 8px;color:var(--db-muted);font-size:.95rem;max-width:30ch}

@container (max-width:470px){
  .db-keypad__in{gap:14px;padding:18px 10px}
  .db-keypad__info{flex-basis:140px}
  .db-keypad__pad{width:min(180px,54cqi);gap:8px}
  .db-keypad__key{height:48px;font-size:1.2rem}
  .db-keypad__key--del{font-size:.78rem}
  .db-keypad__title{font-size:1.25rem}
  .db-keypad__dots{gap:10px}
  .db-keypad__dots i{width:13px;height:13px}
  .db-keypad__sub{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .db-keypad__dots.is-err,.db-keypad.is-open .db-keypad__check{animation:none}
  .db-keypad.is-open .db-keypad__check path{animation:none;stroke-dashoffset:0}
  .db-keypad__key,.db-keypad__dots i,.db-keypad__done{transition:none}
  .db-keypad__key:active,.db-keypad__key.is-down{transform:none}
}