/* Sectie 4 — ⌥Space: keycaps + command-paneel-overlay (#5 ⌥Space-reveal).
   Beslist 2026-07-21: knop = primaire trigger, échte hotkey met invoerveld-guard. */

.keys-card{padding:clamp(2rem,4vw,3.5rem);display:grid;justify-items:center;gap:1.6rem;text-align:center;margin-top:2rem}
.keys{display:flex;gap:.9rem;align-items:center}
.key{background:linear-gradient(#FFFFFF,#F2F5FB);border:1px solid rgba(52,96,178,.16);border-radius:14px;box-shadow:0 4px 0 rgba(52,96,178,.14),var(--chip-shadow);padding:1rem 1.3rem;font-weight:600;font-size:1.15rem;color:#0E1524;min-width:64px;transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
[data-theme="dark"] .key{background:linear-gradient(#1B2942,#131F36);border-color:rgba(140,180,255,.24);color:var(--ink);box-shadow:0 4px 0 rgba(0,0,0,.5),var(--chip-shadow)}
.key.space{min-width:180px}
@media (max-width:480px){.key.space{min-width:110px}}
.keys .plus{color:var(--ink-3);font-size:1.1rem}
.pressed .key{transform:translateY(3px);box-shadow:0 1px 0 rgba(52,96,178,.14),var(--chip-shadow)}
[data-theme="dark"] .pressed .key{box-shadow:0 1px 0 rgba(0,0,0,.5),var(--chip-shadow)}
.keys-card .cta{margin-top:0}
.hint{font-size:.8rem;color:var(--ink-3);max-width:44ch}

/* overlay */
.ov{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:1.2rem;visibility:hidden}
.ov .back{position:absolute;inset:0;background:rgba(14,21,36,.28);opacity:0;transition:opacity .24s var(--ease)}
[data-theme="dark"] .ov .back{background:rgba(2,5,12,.55)}
.ov .panel{position:relative;width:min(520px,100%);background:var(--surface);border:1px solid var(--line-strong);border-radius:20px;box-shadow:var(--card-shadow);padding:1.1rem;transform:scale(.97);opacity:0;transition:transform .24s var(--ease),opacity .24s var(--ease)}
.ov.open{visibility:visible}
.ov.open .back{opacity:1}
.ov.open .panel{transform:scale(1);opacity:1}

.ov input{width:100%;border:1px solid var(--line-strong);border-radius:12px;padding:.75rem 2.4rem .75rem .9rem;font-family:var(--sans);font-size:.95rem;color:var(--ink);background:var(--bg);outline:none}
.ov input::placeholder{color:var(--ink-3)}
.ov input:focus{border-color:var(--neon);box-shadow:0 0 0 3px var(--neon-soft)}
.ov .sugg{margin-top:.7rem;display:grid;gap:.3rem}
.ov .sugg button{display:flex;gap:.55rem;align-items:center;font-size:.85rem;color:var(--ink-2);padding:.45rem .5rem;border-radius:10px;text-align:left;width:100%;transition:background var(--dur-fast)}
.ov .sugg button:hover,.ov .sugg button:focus-visible{background:var(--neon-faint)}
.ov .sugg svg{flex:none}
.ov .x{position:absolute;top:.7rem;right:.7rem;border:0;background:none;padding:.3rem;color:var(--ink-3);border-radius:8px}
.ov .x:hover{color:var(--ink)}
.ov .demo-tag{position:static;display:inline-block;margin-top:.8rem}

@media (prefers-reduced-motion:reduce){
  .ov .back,.ov .panel{transition:none}
  .key{transition:none}
}