/* Shared overlays: top-bar notification buttons, checks/guide popover, select menu, video gate and modal. */

@keyframes popin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(235,87,87,.55)}100%{box-shadow:0 0 0 9px rgba(235,87,87,0)}}

.floating{background:var(--surface);border-radius:8px;box-shadow:rgba(var(--shadow-rgb),.05) 0 0 0 1px,rgba(var(--shadow-rgb),.1) 0 3px 6px,rgba(var(--shadow-rgb),.2) 0 9px 24px;animation:popin .12s ease-out}

/* ---------- top-bar buttons ---------- */
.nbtn{position:relative;display:inline-grid;place-items:center;width:32px;height:30px;border:0;background:transparent;color:var(--muted);border-radius:6px;cursor:pointer}
.nbtn:hover{background:var(--hover);color:var(--ink)}
/* the count sits on the icon's corner, only when there's something to look at */
.nbadge{position:absolute;top:1px;right:0;display:grid;place-items:center;min-width:15px;height:15px;padding:0 4px;border-radius:8px;font-size:9.5px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--surface)}
.nbadge.warn{background:#eb5757;color:#fff}
.nbadge.info{background:#9aa1ad;color:#fff}
.nbtn.pulse .nbadge{animation:pulse 1.2s ease-out 2}

/* ---------- checks + guide popover ---------- */
.popover{position:fixed;top:44px;right:14px;z-index:50;width:360px;max-height:calc(100vh - 70px);overflow:auto}
.pop-body{padding:10px 12px 12px}
.check{display:flex;gap:8px;margin-bottom:6px;padding:8px 10px;border-radius:4px;background:var(--soft);font-size:13.5px;line-height:1.45}
.check::before{flex:none;font-size:14px;line-height:1.4}
.check.warn::before{content:"⚠️"}
.check.info{color:rgba(var(--ink-rgb),.8)} .check.info::before{content:"💡"}
.check.ok::before{content:"✅"}
.check > span{flex:1}
.check-x{flex:none;align-self:flex-start;width:20px;height:20px;margin:-2px -4px 0 0;border:0;border-radius:4px;background:none;color:var(--faint);font-size:15px;line-height:1;cursor:pointer;opacity:0}
.check:hover .check-x{opacity:1}
.check-x:hover{background:rgba(var(--ink-rgb),.08);color:var(--ink)}
.check-none{padding:8px 2px;font-size:13px;color:var(--faint)}
.check-restore{border:0;background:none;padding:4px 2px;font-size:12px;color:var(--faint);cursor:pointer}
.check-restore:hover{color:var(--accent)}
.guide h3{font-size:12px;font-weight:600;color:var(--muted);margin:6px 0}
.guide ul{margin:0 0 12px;padding-left:18px}
.guide li{margin:5px 0;font-size:13.5px;color:rgba(var(--ink-rgb),.9)}

/* ---------- select menu ---------- */
.menu{position:fixed;z-index:60;width:280px;max-height:340px;display:flex;flex-direction:column;border-radius:6px}
.menu-search{border:0;border-bottom:1px solid var(--line);border-radius:6px 6px 0 0;background:var(--field);padding:9px 12px;outline:none}
.menu-list{overflow:auto;padding:4px}
.mi{display:flex;align-items:center;gap:8px;min-height:30px;padding:4px 8px;border-radius:4px;cursor:pointer}
.mi.hi,.mi:hover{background:var(--hover)}
.mg{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:500;color:var(--faint);padding:8px 4px 2px 8px}
.mi-del{display:grid;place-items:center;width:22px;height:22px;margin-left:auto;border:0;border-radius:4px;background:none;color:var(--faint);cursor:pointer;opacity:0}
.mi:hover .mi-del{opacity:1}
.mi-del:hover{background:var(--fact-soft);color:var(--fact)}
.mg-add{width:20px;height:20px;border:0;border-radius:4px;background:none;color:var(--faint);font-size:15px;line-height:1;cursor:pointer}
.mg-add:hover{background:var(--hover);color:var(--accent)}
.mnew{padding:2px 8px 4px}
.mnew-group{display:block;width:100%;margin-bottom:2px;padding:6px 8px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;font-size:12.5px;color:var(--accent);text-align:left;cursor:pointer}
.mnew-group:hover{background:var(--hover)}
.mnew-in{width:100%;border:1px solid var(--accent);border-radius:4px;padding:4px 8px;font:13px var(--mono);outline:none;box-shadow:0 0 0 2px var(--accent-soft)}
.mcheck{flex:none;width:16px;height:16px;border-radius:3px;display:grid;place-items:center;font-size:11px;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(var(--ink-rgb),.3)}
.mcheck.on{background:var(--accent);box-shadow:none}
.mtick{margin-left:auto;font-size:13px;color:var(--muted)}
.mkey{margin-left:auto;border:1px solid var(--line);border-radius:3px;padding:0 5px;font-size:11px;line-height:16px;color:var(--faint)}
.mtick + .mkey{margin-left:8px}
.mempty{padding:10px;font-size:13px;color:var(--faint)}
.mfoot{display:flex;align-items:center;gap:4px;margin-top:4px;padding:8px 8px 4px;border-top:1px solid var(--line);font-size:12px;color:var(--faint)}
.mfoot span{margin-right:auto}
.mfoot button{width:28px;height:24px;border:0;border-radius:4px;background:transparent;font:600 13px var(--mono);color:var(--muted);cursor:pointer}
.mfoot button:hover{background:var(--hover)}
.mfoot button.on{background:var(--tag-red);color:var(--tag-red-ink)}


/* ---------- how-to videos ---------- */
.gate{max-width:860px}
.gate-kicker{font-size:13px;color:var(--faint);margin:-14px 0 12px}
.gate-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 8px}
.vframe{position:relative;width:100%;aspect-ratio:16/9;background:#0f0f0f;border-radius:8px;overflow:hidden;box-shadow:rgba(var(--shadow-rgb),.1) 0 0 0 1px,rgba(var(--shadow-rgb),.1) 0 2px 4px}
.vframe iframe,.vframe video{position:absolute;inset:0;width:100%;height:100%;border:0}
.vplaceholder{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:10px;color:rgba(255,255,255,.55);background:linear-gradient(135deg,#2a2a2a,#1a1a1a)}
.vdot{margin-left:auto;font-size:9px;color:var(--accent);background:var(--accent-soft);border-radius:3px;padding:1px 4px}
.vmodal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:rgba(var(--shadow-rgb),.6);animation:popin .12s ease-out}
.vmodal-card{width:min(960px,100%);background:var(--surface);border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.vmodal-hd{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 8px 16px;font-weight:600}
.vmodal .vframe{border-radius:0;box-shadow:none}

@media (max-width:720px){ .popover{left:8px;right:8px;width:auto} }

/* ---------- dialogs (replace prompt / confirm / alert) ---------- */
@keyframes dlgin{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.dlg-back{position:fixed;inset:0;z-index:200;display:grid;place-items:start center;padding:14vh 16px 16px;background:rgba(var(--shadow-rgb),.32);animation:fadein .12s ease-out}
.dlg{width:min(440px,100%);background:var(--surface);border-radius:10px;box-shadow:0 0 0 1px rgba(var(--shadow-rgb),.05),0 6px 18px rgba(var(--shadow-rgb),.12),0 24px 60px rgba(var(--shadow-rgb),.2);animation:dlgin .16s cubic-bezier(.2,.9,.3,1.2)}
.dlg-hd{display:flex;align-items:center;gap:12px;padding:20px 22px 0}
.dlg-ic{width:32px;height:32px;flex:none;border-radius:8px;display:grid;place-items:center;font-size:15px;font-weight:700}
.dlg-ic.fact{background:var(--fact-soft);color:var(--fact)}
.dlg-ic.dim{background:var(--tag-blue);color:var(--dim)}
.dlg-ic.bridge{background:var(--tag-purple);color:var(--bridge)}
.dlg-ic.warn{background:var(--tag-yellow);color:var(--amber)}
.dlg-ic.danger{background:var(--tag-red);font-size:14px}
.dlg-ic.info{background:var(--tag-gray);color:var(--muted)}
.dlg-title{font-size:16px;font-weight:600;line-height:1.35}
.dlg-body{padding:10px 22px 0 66px;color:var(--muted);font-size:14px;line-height:1.55}
.dlg-body p{margin:0 0 8px}
.dlg-body b{color:var(--ink);font-weight:600}
.dlg-body code{font:12.5px var(--mono);background:var(--soft);padding:1px 5px;border-radius:3px;color:#eb5757}
.dlg-opts{display:grid;gap:6px;margin:10px 0 4px}
.dlg-opt{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:6px;background:var(--soft)}
.dlg-opt .k{flex:none;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:1px 6px;border-radius:3px}
.dlg-opt .k.yes{background:var(--tag-green);color:var(--ok)}
.dlg-opt .k.no{background:var(--tag-gray);color:var(--muted)}
.dlg-form{padding:14px 22px 0 66px}
.dlg-in,.dlg-sel{width:100%;font:inherit;font-size:15px;color:var(--ink);padding:8px 10px;border:1px solid rgba(var(--ink-rgb),.16);border-radius:6px;background:var(--surface);outline:none;transition:border-color .1s,box-shadow .1s}
.dlg-in:focus,.dlg-sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.dlg-in::placeholder{color:var(--faint)}
.dlg-preview{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;color:var(--faint);min-height:22px}
.dlg-hint{margin-top:8px;font-size:12.5px;color:var(--faint)}
.dlg-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.dlg-row .and{color:var(--faint);font-size:13px}
.dlg-ft{display:flex;align-items:center;gap:8px;padding:20px 22px 18px}
.dlg-keys{margin-right:auto;font-size:12px;color:var(--faint)}
.dlg kbd{font:11px var(--mono);padding:0 4px;border-radius:3px;background:rgba(var(--ink-rgb),.08);color:inherit}
.dlg .btn{padding:6px 12px;border-radius:6px;font-weight:500}
.dlg .btn.primary kbd,.dlg .btn.danger kbd{background:rgba(255,255,255,.22)}
.btn.danger{background:var(--fact);border-color:var(--fact);color:#fff}
.btn.danger:hover{background:#c93535}
.btn.primary:disabled kbd{background:transparent}
.dlg .btn:focus{outline:none} .dlg .btn:focus-visible{box-shadow:0 0 0 3px var(--accent-soft)} .dlg .btn.danger:focus-visible{box-shadow:0 0 0 3px var(--tag-red)}

/* how-to video, at the top of the Guide popover */
.guide-video{display:flex;align-items:center;gap:10px;width:100%;margin:2px 0 12px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font:inherit;text-align:left;cursor:pointer}
.guide-video:hover{background:var(--soft);border-color:rgba(35,131,226,.35)}
.gv-ic{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:6px;background:var(--accent);color:#fff;font-size:11px}
.guide-video b{display:block;font-size:13.5px;font-weight:600;line-height:1.25}
.guide-video small{font-size:12px;color:var(--faint)}

/* + that opens Fact / Dimension / Bridge on hover (diagram toolbar, Plan Pipeline) */
.addnode{position:relative;display:inline-flex}
.addnode > .btn:not(.labeled){min-width:30px;font-size:15px;line-height:1.2}
.addnode-menu{position:absolute;top:100%;left:0;z-index:30;display:none;flex-direction:column;min-width:140px;padding:4px;margin-top:2px;background:var(--surface);border-radius:6px;box-shadow:0 0 0 1px rgba(var(--shadow-rgb),.05),0 3px 6px rgba(var(--shadow-rgb),.1),0 9px 24px rgba(var(--shadow-rgb),.2)}
.addnode::after{content:'';position:absolute;top:100%;left:0;right:0;height:4px}   /* bridge the gap so the hover holds */
.addnode:hover .addnode-menu,.addnode:focus-within .addnode-menu{display:flex}
.addnode-menu button{display:flex;align-items:center;gap:8px;padding:5px 8px;border:0;border-radius:4px;background:none;color:var(--ink);font-size:13px;text-align:left;cursor:pointer}
.addnode-menu button:hover{background:var(--hover)}
.addnode-menu i{width:10px;height:10px;border-radius:2px}
.addnode-menu i.fact{background:var(--fact)} .addnode-menu i.dim{background:var(--dim)} .addnode-menu i.bridge{background:var(--bridge)}