/* Hand-written additions that live outside the artboard: PIN gate and cookie banner.
   Colours come from the bento's tokens (--tile, --text, --accent…), so both follow the theme. */

/* PIN gate, shown in the case study slot of protected cases */
.pin{padding:72px 24px 88px;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--bg);color:var(--text);font-family:'Geist',sans-serif}
.pin-eye{margin:0 0 14px;font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accentInk)}
.pin-h{margin:0 0 10px;font-size:clamp(26px,3vw,34px);line-height:1.1;font-weight:500;letter-spacing:-.03em}
.pin-p{margin:0 0 28px;max-width:420px;font-size:15px;line-height:1.5;font-weight:300;color:var(--muted)}
.pin-f{display:flex;gap:8px;width:100%;max-width:360px}
.pin-in{flex:1;min-width:0;height:48px;padding:0 18px;box-sizing:border-box;border-radius:999px;border:1px solid var(--borderHi);background:var(--tile);color:var(--text);font:400 16px/1 'Geist Mono',monospace;letter-spacing:.3em;outline:none;transition:border-color .2s}
.pin-in:focus{border-color:var(--accent)}
.pin-in::placeholder{letter-spacing:.08em;color:var(--muted)}
.pin-go{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;border:0;border-radius:999px;background:var(--accent);color:#fff;font:500 15px/1 'Geist',sans-serif;cursor:pointer}
.pin-go svg{width:16px;height:16px}
.pin-go[disabled]{opacity:.6;cursor:default}
.pin-err{min-height:20px;margin:12px 0 0;font-size:13px;color:var(--accentInk)}
.pin-shake{animation:pinShake .36s cubic-bezier(.36,.07,.19,.97)}
@keyframes pinShake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* Cookie banner (only when settings.json has a clarityId) */
.ck{position:fixed;left:16px;bottom:16px;z-index:70;width:min(380px,calc(100vw - 32px));box-sizing:border-box;padding:20px;border-radius:var(--r,16px);background:var(--tile);border:1px solid var(--borderHi);color:var(--text);font-family:'Geist',sans-serif;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.1,1)}
.ck.on{opacity:1;transform:none}
.ck p{margin:0 0 16px;font-size:14px;line-height:1.5;font-weight:300}
.ck-b{display:flex;gap:8px}
.ck button{height:38px;padding:0 16px;border-radius:999px;font:500 14px/1 'Geist',sans-serif;cursor:pointer}
.ck-y{border:0;background:var(--accent);color:#fff}
.ck-n{border:1px solid var(--borderHi);background:transparent;color:var(--text)}
@media (prefers-reduced-motion:reduce){.ck{transition:opacity .2s}.pin-shake{animation:none}}

/* Keyboard focus ring. Many bento buttons use inline "all: unset", which removes the browser's
   own ring, so this needs !important. Mouse clicks don't trigger :focus-visible. */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent,#ff375f) !important;outline-offset:3px}
.b-gal-hit:focus-visible{outline-offset:-4px !important;border-radius:var(--r,16px)}
.pin-in:focus-visible{outline:none !important}

/* No showcase video yet: hide the video placeholder text, fake player controls and the
   duration badge / play icon on the card. The design panel (?design) still shows them. */
html.no-design #cs-video[data-novid] > :not(video){display:none !important}
html.no-design .b-img[data-novid] > .b-thumb ~ span{display:none !important}
html.no-design .b-thumb > *{display:none !important}