/* Keep muted/secondary menu text legible on ANY surface — including a heavily
   customized --sur — by re-deriving --mu (used for labels, descriptions, icons)
   from the readable text colour blended toward the surface, instead of a fixed
   grey that can wash out against a saturated custom surface. Scoped to floating
   menus so the rest of the app keeps its tuned greys. */
.slash-m,.bk-menu,.pm,.dp,#idb-pop,#tbl-dd,#idb-rowmenu,#color-pal,#link-pop,#cloud-menu{
  --mu: color-mix(in srgb, var(--tx) 62%, var(--sur));
}

/* ── MENU MOTION ── every floating sub-menu fades + lifts in (replays each time it
   goes from display:none to shown). The fade-OUT is an inert copy that
   js/ui/menu-motion.js drops in place as the real menu closes. Reduce-motion
   (36-motion.css) neutralises both. Keep this list in sync with MENUS there. */
.slash-m,.bk-menu,.pm,.dp,.ptp,.prop-editor,.color-pal,.fmt-color-pop,.grid-hmenu,.idb-pop,.idb-rowmenu,.idb-colpop,.icon-picker,.sb-menu,.link-pop,#tbl-dd{
  animation:menuIn .14s cubic-bezier(.2,.8,.2,1);
}
.menu-ghost{animation:menuOut .11s ease-in forwards !important;pointer-events:none !important}
@keyframes menuIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@keyframes menuOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-2px)}}

/* ── SLASH MENU ──────────────────────────────── */
.slash-m{position:fixed;z-index:500;background:var(--sur);border:1px solid var(--bd2);border-radius:var(--r-lg);box-shadow:var(--elev-2);width:260px;display:none}
.slash-m.open{display:block}
.sm-hdr{padding:8px 12px 4px;font-size:9px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--mu)}
.sm-its{max-height:300px;overflow-y:auto;padding:4px 0}
.sm-it{display:flex;align-items:center;gap:10px;padding:7px 12px;cursor:pointer;transition:background var(--t-fast)}
.sm-it:hover,.sm-it.foc{background:var(--sur2)}
.sm-ico{width:32px;height:32px;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--mu);flex-shrink:0;font-family:var(--fs)}
.sm-nm{font-size:12px;color:var(--tx)}
.sm-ds{font-size:10px;color:var(--mu)}

/* ── BLOCK MENU ──────────────────────────────── */
.bk-menu{position:fixed;z-index:500;background:var(--sur);border:1px solid var(--bd2);border-radius:var(--r-lg);box-shadow:var(--elev-1);width:200px;display:none;overflow-y:auto;max-height:calc(100vh - 16px)}
.bk-menu.open{display:block}
.bm-s{padding:4px 0}
.bm-s+.bm-s{border-top:1px solid var(--bd)}
.bm-lbl{font-size:9px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--mu);padding:5px 12px 3px}
.bm-it{display:flex;align-items:center;gap:8px;padding:7px 12px;cursor:pointer;font-size:12px;color:var(--tx);transition:background var(--t-fast)}
.bm-it:hover{background:var(--sur2)}
.bm-it.danger{color:var(--re)}
.bm-it svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0}
.bm-sub{padding:2px 0 2px 10px;display:none}
.bm-sub.open{display:block}
.bm-si{display:flex;align-items:center;gap:8px;padding:5px 12px;cursor:pointer;font-size:11px;color:var(--mu);transition:background var(--t-fast),color var(--t-fast)}
.bm-si:hover{background:var(--sur2);color:var(--tx)}
/* Block colour swatches */
.bm-colors{display:flex;flex-wrap:wrap;gap:5px;padding:3px 12px 7px}
.bm-sw,.bm-bgsw{width:22px;height:22px;border:1px solid var(--bd);border-radius:var(--r-sm);cursor:pointer;flex-shrink:0;transition:border-color var(--t-fast),transform var(--t-fast)}
.bm-sw:hover,.bm-bgsw:hover{border-color:var(--ac);transform:translateY(-1px)}
.bm-sw{background:var(--bg);color:var(--tx);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;font-family:var(--fs);line-height:1}
.bm-bgsw-def,.bm-sw-def{position:relative;background:var(--bg)}
.bm-bgsw-def::after{content:'';position:absolute;inset:4px;border-radius:50%;border:1px solid var(--mu);background:linear-gradient(135deg,transparent 45%,var(--mu) 45%,var(--mu) 55%,transparent 55%)}

/* ── PROPERTY PICKERS ────────────────────────── */
.pm{position:fixed;z-index:600;background:var(--sur);border:1px solid var(--bd2);border-radius:var(--r-lg);box-shadow:var(--elev-2);width:220px;display:none}
.pm.open{display:block}
.pm-hdr{padding:9px 12px 7px;font-size:11px;color:var(--mu);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.pm-body{padding:6px 0}
.pm-it{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:12px;color:var(--tx);transition:background var(--t-fast)}
.pm-it:hover{background:var(--sur2)}
.pm-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.pm-add{display:flex;gap:6px;padding:7px 12px;border-top:1px solid var(--bd)}
.pm-inp{flex:1;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r-sm);color:var(--tx);font-size:11px;padding:4px 8px;outline:none;font-family:var(--fm)}
.pm-inp:focus{border-color:var(--ac)}
.pm-del-btn{background:none;border:none;color:var(--mu);cursor:pointer;font-size:11px;padding:2px 6px}
.pm-del-btn:hover{color:var(--re)}

/* ── DATE PICKER ─────────────────────────────── */
.dp{position:fixed;z-index:600;background:var(--sur);border:1px solid var(--bd2);border-radius:var(--r-lg);box-shadow:var(--elev-2);width:220px;display:none}
.dp.open{display:block}
.dp-hdr{padding:9px 12px 7px;font-size:11px;color:var(--mu);border-bottom:1px solid var(--bd)}
.dp-nav{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 4px}
.dp-mo{font-size:12px;color:var(--tx)}
.dp-nb{background:none;border:none;color:var(--mu);cursor:pointer;padding:2px 6px;border-radius:var(--r-xs);font-size:14px}
.dp-nb:hover{background:var(--bd2);color:var(--tx)}
.dp-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:0 8px 8px}
.dp-dh{text-align:center;font-size:9px;color:var(--mu);padding:3px}
.dp-d{text-align:center;font-size:11px;padding:5px 2px;border-radius:var(--r-xs);cursor:pointer;color:var(--mu);transition:background var(--t-fast)}
.dp-d:hover{background:var(--bd2);color:var(--tx)}
.dp-d.tod{color:var(--ac)}
.dp-d.sel{background:var(--ac);color:#1a0810}
.dp-d.om{opacity:.3;pointer-events:none}
.dp-foot{padding:6px 12px 8px;border-top:1px solid var(--bd)}
.dp-clr{width:100%;background:none;border:1px solid var(--bd);border-radius:var(--r-sm);color:var(--mu);font-size:11px;padding:5px;cursor:pointer;font-family:var(--fm);transition:border-color var(--t-fast)}
.dp-clr:hover{border-color:var(--mu);color:var(--tx)}

/* ── PROP TYPE PICKER ────────────────────────── */
.ptp{position:fixed;z-index:600;background:var(--sur);border:1px solid var(--bd2);border-radius:var(--r-lg);box-shadow:var(--elev-1);width:160px;display:none;overflow:hidden}
.ptp.open{display:block}
.ptp-it{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:12px;color:var(--tx);transition:background var(--t-fast)}
.ptp-it:hover{background:var(--sur2)}