/* GLENMUN VIII — PIN Code Entry kiosk (iPad). Loaded after style.css on /delegate only.
   Passcode-screen look: serif title, "Enter PIN", six dots, round translucent keys with letters,
   "Forgot?" / "Cancel" as plain text, deep indigo wallpaper with a violet glow bottom-right. */

@font-face { font-family: "Cinzel"; font-weight: 600; font-style: normal; font-display: swap;
  src: url(/assets/fonts/cinzel-latin-600-normal.woff2) format("woff2"); }

/* ---- wallpaper ---- */
body.kiosk { background: #100a2e; }
.kiosk .wall { background: #110a33; }
.kiosk .wall i:nth-child(1) { background: radial-gradient(circle, #4a2fd2 0, rgba(74, 47, 210, 0) 66%); }                                   /* bright indigo, top-left */
.kiosk .wall i:nth-child(2) { left: auto; top: auto; right: -26vmax; bottom: -38vmax; background: radial-gradient(circle, #8a32cf 0, rgba(138, 50, 207, 0) 66%); } /* violet, bottom-right */
.kiosk .wall i:nth-child(3) { background: radial-gradient(circle, #34239a 0, rgba(52, 35, 154, 0) 66%); }                                  /* mid indigo, glowing behind the keypad */
.kiosk .wall i:nth-child(4) { left: auto; bottom: auto; right: -10vmax; top: -22vmax; width: 70vmax; height: 70vmax;
  background: radial-gradient(circle, #0d0724 0, rgba(13, 7, 36, 0) 66%); }                                                                /* dark, top-right */
.kiosk #fx-canvas { opacity: .45; }

/* ---- title block ---- */
.kiosk .k-pad { gap: 0; }
.k-head { display: grid; justify-items: center; gap: clamp(10px, 1.9dvh, 22px); margin-bottom: clamp(18px, 3.8dvh, 46px); text-align: center; }
.k-title { margin: 0; font: 600 clamp(1.5rem, 4.7dvh, 3.4rem) / 1 "Cinzel", "Times New Roman", Georgia, serif; letter-spacing: .17em; padding-left: .17em;
  text-transform: uppercase; color: #fff; text-shadow: 0 2px 26px rgba(150, 120, 255, .4); }
.k-sub { margin: 0; font-size: clamp(.95rem, 2.1dvh, 1.4rem); font-weight: 500; letter-spacing: .01em; color: rgba(224, 214, 255, .72); }

/* ---- PIN dots ---- */
.kiosk .k-slots { height: auto; gap: clamp(18px, 3.5dvh, 38px); margin-bottom: clamp(22px, 5.2dvh, 60px); }
.kiosk .slot { width: clamp(11px, 1.45dvh, 17px); border-width: 1.5px; font-size: 0; transition: background .15s, box-shadow .15s; }
.kiosk .slot.on { background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, .4); }
.kiosk .slot.show { transform: none; }   /* digits are never shown, even briefly */
.kiosk .slot.cur { animation: none; }

/* ---- keypad ---- */
.kiosk .k-keys { --kd: clamp(72px, min(10.3dvh, 21vw), 132px); gap: clamp(12px, 2dvh, 24px) clamp(18px, 3.3dvh, 38px); }
.kiosk .key { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--kd) * .035);
  background: rgba(142, 122, 240, .31); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .17);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; transition: background .08s, color .08s, transform .08s; }
.kiosk .key::before, .kiosk .key::after { display: none; }
.kiosk .key b { font-weight: 400; font-size: calc(var(--kd) * .42); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kiosk .key small { display: block; min-height: 1em; padding-left: .26em; font-size: calc(var(--kd) * .092); font-weight: 700; line-height: 1; letter-spacing: .26em; color: rgba(255, 255, 255, .72); }
/* pressed: solid light key with dark digits, like a real passcode pad */
.kiosk .key:active, .kiosk .key.down { background: #ece9f8; color: #1b1052; box-shadow: none; transform: scale(.97); }
.kiosk .key:active small, .kiosk .key.down small { color: #3b2d88; }
/* "Forgot?" and "Cancel/Delete": plain text */
.kiosk .key.fn { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; }
.kiosk .key.fn .kt { font-size: calc(var(--kd) * .19); font-weight: 500; letter-spacing: .005em; }
.kiosk .key.fn:active, .kiosk .key.fn.down { background: none; color: #fff; opacity: .55; transform: none; }
.kiosk .k-status { min-height: 0; margin-top: clamp(8px, 1.6dvh, 18px); }

/* ---- success card: Name on its own row, Committee and Allocation side by side ---- */
.kiosk .res-fields > div:nth-child(2) { grid-column: auto; }

/* ---- "Forgot?" help sheet ---- */
.k-help { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; padding: 24px; background: rgba(10, 5, 35, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.k-help-card { max-width: min(540px, 90vw); padding: clamp(24px, 4dvh, 40px); border-radius: 32px; text-align: center; display: grid; gap: 14px; justify-items: center;
  background: rgba(124, 106, 226, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 30px 80px rgba(0, 0, 0, .45); }
.k-help-card h3 { margin: 0; font: 600 clamp(1.3rem, 3.2dvh, 2rem) / 1.1 "Cinzel", Georgia, serif; letter-spacing: .1em; text-transform: uppercase; }
.k-help-card p { margin: 0; font-size: clamp(1rem, 2.3dvh, 1.35rem); line-height: 1.5; color: rgba(236, 230, 255, .88); }
.k-help-card .res-btn { min-width: 160px; margin-top: 8px; }